<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔壁老朱（zhusir）</title>
    <!--将http请求不安全的转换为https-->
    <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="SHORTCUT ICON" href="images/index/zhusir2.png"/>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/jquery.fullpage.css">
    <link rel="stylesheet" href="css/audio.css">
    <link rel="stylesheet" href="css/dog.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
    <!--<script src="js/angular.min.js"></script>-->
    <script src="js/jquery-1.9.2.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>
    <script src="js/text.js"></script>
    <!--<script src="js/audio.js"></script>-->
    <script src="js/canvas.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<!--进入页面闪屏页-->
<div class="sping-box">
    <!--闪屏文字-->
    <div class="sp-text"></div>
    <!--左边提示说明-->
    <div class="sp-work">
        <div class="sp-w-title" id="sp-tishi">提<br>示<br>说<br>明</div>
        <ul>
            <li>
                <b>①、请使用谷歌浏览器</b>
                <p>为了更好的体验，看官请务必使用谷歌浏览器 </p>
            </li>
            <li>
                <b>②、效果纯手工打造</b>
                <p>本页面使用css3和jquery做的动画效果，全程手码，未使用gif、flash。未使用bootstrap相关插件</p>
            </li>
            <li>
                <b>③、浏览说明</b>
                <p>
                    采用fullpage滚屏页面，兼容pc和wap页面，触摸滚轮均可 <br>
                    采用100%自适应布局，局部采用响应式 <br>
                </p>
            </li>
            <li>
                <b>④、保密</b>
                <p>
                    请点击右下角~ <br>
                    有兴趣的可以联系我~ <br>
                    或者交个朋友煮酒论码，如果是妹纸~更好，哈哈
                </p>
            </li>
            <li>
                <b>⑤、程序猿vs攻城狮</b>
                <p>无尽的话语...</p>
            </li>
            <li class="sp-ul-last">X</li>
        </ul>
    </div>
    <!--看门藏獒-->
    <div class="dog-menu">
        <div class="animate-top">
            <!--脑袋-->
            <div class="dog-naodai">
                <!--耳朵-->
                <div  class="dog-header">
                    <span></span><span></span><span></span><span></span>
                </div>
                <!--上头脑-->
                <ul class="dog-header-top">
                    <li class="ht-left"></li>
                    <li class="ht-right"></li>
                    <li class="ht-zuoyan">
                        <div class="zuoyan"></div>
                    </li>
                    <li class="ht-youyan">
                        <div class="youyan"></div>
                    </li>
                </ul>
                <!--下头脑-->
                <ul class="dog-header-bottom">
                    <li class="hb-bottom"></li>
                    <li class="hb-top"></li>
                    <!--舌头-->
                    <li class="dog-shetou"></li>
                </ul>
            </div>
            <!--身体-->
            <ul class="dog-shenti">
            </ul>
            <!--尾巴-->
            <div class="dog-weiba"></div>
        </div>
        <!--下半部分不动-->
        <!--条幅-->
        <ul class="dog-title-box">
            <li class="dog-title">
                看个毛线！！！<br>
                说你呢！<br>
                就是说你呢，现在盯着我看的家伙
            </li>
        </ul>
        <!--两只爪子-->
        <ul class="dog-zhuabox">
            <li class="st-top"><div></div></li>
            <li class="st-bot"><div></div></li>
        </ul>
    </div>
    <!--藏獒end-->

    <!--开启屏幕的按钮-->
    <div id="sp-btn"></div>
</div>
<!-- 鼠标跟随效果 -->
<div class="container-shu">
    <div class="button-shu clicked-shu">♫</div>
</div>
<!--右下角联系方式-->
<ul class="zy-menu">
    <li>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=903319315&site=qq&menu=yes" target="_blank" class="iconfont">&#xe608;</a>
        <p class="zu-m-left">无法临时会话，请加QQ：903319315</p>
    </li>
    <li>
        <a href="javascript:;" class="iconfont">&#xe61a;</a>
        <p class="zu-m-left">
            <span>打开扫一扫，加我微信</span>
            <img src="images/index/weixin.png" alt="">
        </p>
    </li>
    <li>
        <a href="tel:13546698741" class="iconfont">&#xe68d;</a>
        <p class="zu-m-left">电话：13546698741</p>
    </li>
    <li>
        <a href="javascript:;" class="iconfont">&#xe60f;</a>
        <p class="zu-m-left">邮箱：zhusirs@139.com</p>
    </li>
</ul>
<!-- 主页左上角logo -->
<div class="logo"></div>
<!--右上角音乐播放器-->
<div class="zhu-audio">
    <div class="audio-box">
        <!--mp3-->
        <div class="audio-mp3">
            <audio src="music/fa ded.mp3" autoplay id="audio-fixed" loop></audio>
            <div id="audio-button"></div>
        </div>
        <!--频谱-->
        <div class="audio-pu">
            <div class="au-div au-1"></div>
            <div class="au-div au-2"></div>
            <div class="au-div au-3"></div>
            <div class="au-div au-4"></div>
            <div class="au-div au-5"></div>
            <div class="au-div au-6"></div>
            <div class="au-div au-7"></div>
            <div class="au-div au-8"></div>
            <div class="au-div au-9"></div>
            <div class="au-div au-10"></div>
            <div class="au-div au-11"></div>
            <div class="au-div au-12"></div>
            <div class="au-div au-13"></div>
            <div class="au-div au-14"></div>
            <div class="au-div au-15"></div>
            <div class="au-div au-16"></div>
            <div class="au-div au-17"></div>
            <div class="au-div au-18"></div>
            <div class="au-div au-19"></div>
            <div class="au-div au-20"></div>
        </div>
    </div>
</div>

<!--这里可以加一个进入页面时的进度条-->






<!--fullPage菜单栏-->
<ul id="myMenu" class="zhu-tops">
    <li data-menuanchor="page1"><a href="#page1" class="iconfont">个人简述</a></li>
    <li data-menuanchor="page2"><a href="#page2" class="iconfont">薄技在身</a></li>
    <li data-menuanchor="page3"><a href="#page3" class="iconfont">即兴之作</a></li>
    <li data-menuanchor="page4"><a href="#page4" class="iconfont">手机终端</a></li>
    <li data-menuanchor="page5"><a href="#page5" class="iconfont">落笔成蝇</a></li>
    <li data-menuanchor="page6"><a href="#page6" class="iconfont">信而有征</a></li>
</ul>

<!--fullPage内容-->
<div id="fullpage">
    <!--第一屏-->
    <div class="section full-1">
        <div class="sec1-box">
            <div class="sec1-left sec1-border"></div>
            <div class="sec1-right sec1-border"></div>
            <div class="sec1-top sec1-border"></div>
            <div class="sec1-bottom sec1-border"></div>
            <div class="sec1-content">
                <ul class="sec1-ulone">
                    <h1>如果一切都戛然而止，你是否还会遗憾...</h1>
                    <li>
                        <img src="images/index/zhusirlan.jpg" alt="">
                    </li>
                </ul>
                <div class="sec1-ultwo">
                    <ul class="ultwo-one">
                        <li><img src="images/page1/zhou2.jpg" alt=""></li>
                        <li><img src="images/page1/zhou7.png" alt=""></li>
                        <li><img src="images/page1/zhou4.jpg" alt=""></li>
                        <li><img src="images/page1/zhou9.png" alt=""></li>
                        <li><img src="images/page1/zhou6.jpg" alt=""></li>
                        <li><img src="images/page1/zhou3.jpg" alt=""></li>
                        <li><img src="images/page1/zhou1.jpg" alt=""></li>
                        <li><img src="images/page1/zhou5.jpg" alt=""></li>
                        <li><img src="images/page1/zhou8.png" alt=""></li>
                    </ul>
                    <ul class="ultwo-two">
                        <li>
                            <p>个人简介</p>
                            <div>我叫朱志宏..就这样</div>
                        </li>
                        <li>
                            <p>职业</p>
                            <div>web前端</div>
                        </li>
                        <li>
                            <p>籍贯</p>
                            <div>山西阳泉</div>
                        </li>
                        <li>
                            <p>毕业学校</p>
                            <div>山西建筑职业技术学院</div>
                        </li>
                        <li>
                            <p>年龄</p>
                            <div>20+2=“？”</div>
                        </li>
                        <li>
                            <p>专业技能</p>
                            <div>HTML5 <br> C333 <br> JavaScript</div>
                        </li>
                        <li>
                            <p>我的特长</p>
                            <div>思路灵活、清晰 <br>自学能力较强 <br>良好的自制力</div>
                        </li>
                        <li>
                            <p>业余爱好</p>
                            <div>跑步、听音乐 <br>旅行</div>
                        </li>
                        <li>
                            <p>小结语</p>
                            <div>如果一切都戛然而止 <br>你是否还会遗憾...</div>
                        </li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
    <!--第二屏-->
    <div class="section full-2">
        <!--clip-->
        <div class="clip-box">
            <p class="clip-p">career</p>
        </div>
        <!--技能-->
        <div class="sec2-box">
            <div class="s2-guo1"><img src="images/page2/guo1.png" alt=""></div>
            <div class="s2-guo2"><img src="images/page2/guo2.png" alt=""></div>
            <div class="s2-guo3"><img src="images/page2/guo3.png" alt=""></div>
        </div>
    </div>
    <!--第三屏-->
    <div class="section full-3">
        <div class="sec3-box">
            <ul class="s3-ul">
                <img src="images/page3/weixin.jpg" alt="">
                <li>
                    <p>微信，是一种生活方式</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/wechat/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/wuziqi.jpg" alt="">
                <li>
                    <p>益智·五子棋</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/newqi/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/canvas.jpg" alt="">
                <li>
                    <p>canvas画板</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/newcanvas/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/poker.jpg" alt="">
                <li>
                    <p>赌神扑克</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/poker/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/angular.jpg" alt="">
                <li>
                    <p>angular记事本</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/angular/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/dazi.jpg" alt="">
                <li>
                    <p>打字游戏</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/dazi/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/kuaiyu.jpg" alt="">
                <li>
                    <p>抽奖中心</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/chouj/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/paobu.jpg" alt="">
                <li>
                    <p>跑步游戏</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/paobu/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/quanping.jpg" alt="">
                <li>
                    <p>3D盒子</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/quanping/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/tanchishe.jpg" alt="">
                <li>
                    <p>贪吃蛇</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/tanchishe/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/tianmao.jpg" alt="">
                <li>
                    <p>临摹天猫</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/tianmao/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/video.jpg" alt="">
                <li>
                    <p>js原声video控件</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/video/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/wangyi.jpg" alt="">
                <li>
                    <p>网易邮箱</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/wangyi/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/yintai.jpg" alt="">
                <li>
                    <p>银泰官网</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/yintai/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/zhongbiao.jpg" alt="">
                <li>
                    <p>钟表</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/zhongbiao/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
            <ul class="s3-ul">
                <img src="images/page3/zhengzhan.jpg" alt="">
                <li>
                    <p>项目整站</p>
                    <hr>
                    <a href="http://zhusirs.oschina.io/zhengzhan/index.html" target="_blank">点击查看</a>
                </li>
            </ul>
        </div>
    </div>

    <!--第四屏-->
    <div class="section full-4">
        <a href="###" class="phone-box">
            <img src="images/page4/appbox.jpg" alt="">
        </a>
    </div>

    <!--第五屏-->
    <div class="section full-5">
        <!--上面引入的canvas.js注释掉了   用的时候放出来-->
        <div class="canvas-box">
            <ul class="can-box">
                <li class="can-li">
                    <canvas id="can1" width="600" height="400"></canvas>
                </li>
                <li class="can-li">
                    <canvas id="can2" width="600" height="400" style="transform:rotateY(180deg);"></canvas>
                </li>
            </ul>
            <!--伪3d轮播-->
            <div class="index-box">
                <ul class="index-ul">
                    <li class="in-l1">
                        <div><img src="http://2.tthunbohui.cn/n/00804kq100hg0mRJRMuM4q8.jpg" alt=""></div>
                        <dl>
                            <dd>酒店：以下所有未做详情简介  后加</dd>
                            <a target="_blank" href="http://tj.jiehun.com.cn/zhuanti/xiyanjiudian0_pc/zt_dhpc20170619_13353/">点击打开</a>
                        </dl>
                    </li>
                    <li class="in-l2">
                        <div><img src="http://3.tthunbohui.cn/n/00403Fem00eB1c8n_0j87W8.jpg" alt=""></div>
                        <dl>
                            <dd>礼服</dd>
                            <a target="_blank" href="http://tj.jiehun.com.cn/zhuanti/hunshalifu_pc/zt_mzpc20170414_11553/">点击打开</a>
                        </dl>
                    </li>
                    <li class="in-l3">
                        <div><img src="http://3.tthunbohui.cn/n/00804zVO00i91YJcR0i84I8.jpg" alt=""></div>
                        <dl>
                            <dd>珠宝</dd>
                            <a target="_blank" href="http://tj.jiehun.com.cn/zhuanti/hunjiashoushi_pc/zt_qr20170120_9902/ ">点击打开</a>
                        </dl>
                    </li>
                    <li class="in-l4">
                        <div><img src="http://1.tthunbohui.cn/n/00404tQo00hT1GR!zMi84I8.jpg" alt=""></div>
                        <dl>
                            <dd>百货</dd>
                            <a target="_blank" href="http://tj.jiehun.com.cn/zhuanti/jiehunbaihuo_pc/zt_bh20170120_9888/">点击打开</a>
                        </dl>
                    </li>
                    <li class="in-l5">
                        <div><img src="http://4.tthunbohui.cn/n/00804gg!00h60qpULMb82O8.jpg" alt=""></div>
                        <dl>
                            <dd>秒杀家装</dd>
                            <a target="_blank" href="http://tj.jiehun.com.cn/zhuanti/jiajujiazhuang_wap/zt_djwap20170525_12408/ ">点击打开</a>
                        </dl>
                    </li>
                    <li class="in-l6">
                        <div><img src="http://4.tthunbohui.cn/n/00804hqD00h61qLJ4wiM3U8.jpg" alt=""></div>
                        <dl>
                            <dd>家装表单</dd>
                            <a target="_blank" href="http://tj.jiehun.com.cn/zhuanti/jiajujiazhuang_wap_jiazhuang/zt_xjwap20170013_13166/">点击打开</a>
                        </dl>
                    </li>
                    <li class="in-l7">
                        <div><img src="http://3.tthunbohui.cn/n/00804qVu00hJ0Z8BCwiw3o8.jpg" alt=""></div>
                        <dl>
                            <dd>百货会员节拼团</dd>
                            <a target="_blank" href="http://tj.jiehun.com.cn/zhuanti/huiyuanjie_wap/zt_bhwap20170628_13653/">点击打开</a>
                        </dl>
                    </li>
                </ul>
                <ul class="index-btn">
                    <li class="in-btn-l"></li>
                    <li class="in-btn-r"></li>
                </ul>
            </div>
        </div>
    </div>

    <!--第六屏-->
    <div class="section full-6">
        <!--angular记事本-->
        <!--<iframe src="zuopin/list/index.html" frameborder="0" class="sec6"></iframe>-->
        <ul class="sec-position">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!--这里运用jquery爆炸-->
        <div class="sec-6-div sec6-phone">
            <form action="" method="post" id="form6">
                <div class="form-div1">
                    <span>姓名：</span><input type="text" name="age">
                    <p>姓名不能为空！</p>
                </div>
                <div class="form-div2">
                    <span>手机：</span><input type="text" name="shouji">
                    <p>手机号不能为空！</p>
                </div>
                <div class="form-div3">
                    <span>邮箱：</span><input type="email" name="email">
                    <p>姓名不能为空！</p>
                </div>
                <div class="form-div4">
                    <span>公司：</span><input type="text" name="gongsi">
                    <p>公司名称不能为空！</p>
                </div>
                <div class="form-div5">
                    <span>地址：</span><input type="text" name="dizhi">
                    <p>地址不能为空！</p>
                </div>
                <div class="form-div6">
                    <span>留言：</span>
                    <textarea name="textarea" id="textarea" cols="40" rows="10" style=""></textarea>
                </div>
                <div class="form-div7">
                    <input type="submit" name="submit" value="提交">
                </div>
            </form>
        </div>
    </div>
</div>





<!--结语-->
<!--
    1.修改闪屏页简介和dog-title文字，和提示说明文字
    2.第一屏


-->









</body>
</html>